/* eslint-disable react/prop-types */
import { Button, Flex, Form, Input } from "antd"
import { useCallback, useEffect, useState } from "react"

import { queryMemberInfoEdit, queryPersonGetValue } from "@/api/member"
import { IModalContent } from "@/api/member/types"
import { SFormItem } from "@/components/common"
import { Toast } from "@/components/messages"
import { useApi } from "@/hooks"
import { useLocale } from "@/locales"

import { StyleContainter, StyleSelect } from "../styles"
import { CustomTextArea } from "./CustomTextArea"
export interface IMobileAfter {
	areaCode: string
	mobile: string
	remark: string
}

export const PhoneNumberModal: React.FC<IModalContent> = ({ handleCancel, filterInfo }) => {
	const { formatMessage } = useLocale()
	const [selectPhone, setSelectPhone] = useState<{ value: string; label: string }[]>()
	useEffect(() => {
		handleQueryPersonGetValue()
	}, [])
	const handleQueryPersonGetValue = async () => {
		const bodyPersonGetValuelRes = {
			k: "obbw.zonecode.cellphone.msg",
			pageNum: 1,
			pageSize: 10
		}
		const [err, personGetValueRes] = await queryPersonGetValue({ ...bodyPersonGetValuelRes })
		if (err) {
			Toast.error(err.msg)
		}
		if (!err) {
			const countries = JSON.parse(personGetValueRes.records[0].v)
			const countryCodes = countries.map((country: any) => country.code)
			const uniqueCountryCodes = [...new Set(countryCodes)] as string[]

			const optionPhone = uniqueCountryCodes.map((code: string) => {
				return { value: code, label: code }
			})
			setSelectPhone(optionPhone)
		}
	}

	const submit = useCallback(
		async (value: IMobileAfter) => {
			const body = {
				mobileAfter: {
					areaCode: value.areaCode,
					mobile: value.mobile,
					remark: value.remark
				},
				userId: filterInfo.userId,
				userName: filterInfo.username,
				merchantId: filterInfo.merchantId
			}
			const [err] = await queryMemberInfoEdit({ ...body })
			if (err) {
				Toast.error(err.msg)
			}
			handleCancel()
			form.resetFields()
		},
		[filterInfo]
	)
	const [form] = Form.useForm()

	const { loading } = useApi()

	return (
		<StyleContainter>
			<Flex align="center" gap={10}>
				<Form
					style={{ width: "100%" }}
					form={form}
					onFinish={submit}
					initialValues={{
						remark: "",
						areaCode: undefined,
						mobile: ""
					}}
				>
					<Flex vertical gap={10}>
						<Flex gap={10}>
							<SFormItem
								rules={[{ required: true, message: formatMessage({ id: "common.rules_area" }) }]}
								className="area-title "
								name="areaCode"
								label={`${formatMessage({ id: "member.button_permissions.phoneNumber" })}:`}
							>
								<StyleSelect allowClear options={selectPhone} placeholder={formatMessage({ id: "common.please_choose" })} />
							</SFormItem>

							<Form.Item
								rules={[{ required: true, message: formatMessage({ id: "common.rules_number" }) }]}
								normalize={(value: string) => {
									return value.replace(" ", "")
								}}
								className="phone-number"
								name="mobile"
							>
								<Input min={0} allowClear type="number" placeholder={formatMessage({ id: "common.placeholder_phone" })} />
							</Form.Item>
						</Flex>

						<CustomTextArea
							normalize={(value: string) => {
								return value.replace(" ", "")
							}}
							placeholder={formatMessage({ id: "member.edit_user.account_status.please_enter" })}
							name="remark"
							label={formatMessage({ id: "member.submit_review_notes" }) + ":"}
						/>

						<Flex justify="center" wrap="wrap" gap={10}>
							<Button
								key="back"
								onClick={() => {
									handleCancel()
									form.resetFields()
								}}
							>
								{formatMessage({ id: "member.table_info.cancel" })}
							</Button>
							<Button htmlType="submit" type="primary" loading={loading}>
								{formatMessage({ id: "common.sure" })}
							</Button>
						</Flex>
					</Flex>
				</Form>
			</Flex>
		</StyleContainter>
	)
}
